JavaScript之箭头函数

2023-09-15 01:32| 来源: 网络整理| 查看: 265

1.箭头函数

ES6新增的一种函数，箭头函数。用一个箭头来定义函数。

let fn = ( ) => { }

上面的箭头函数相当于

let fn = function () { } 2.声明箭头函数 let fn = (形参) => { 函数体 } 3.调用函数 fn(实参) 4.箭头函数的简写

①省略小括号，当形参有且只有一个的时候

let add = (n) => { return n + n } console.log(add(2)) //4

②省略花括号，当代码体只有一条语句的时候

let pow = (n) => n * n console.log(pow(3)) //9 5.箭头函数的特性

①this是静态的，始终指向函数声明时所在区域下的this

②不能作为构造函数实例化对象

let Person = (name, age) => { this.name = name ， this.age = age } let p = new Person('zs', 18) console.log(p)//报错Person is not a constructor

③不能使用argnments变量（保存实参）

普通函数

function fun(a, b) { console.log(arguments) } fun(1, 2) //Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]

箭头函数

let fn = (a, b) => { console.log(arguments) } fn(1, 2) //arguments is not defined

6.应用场景

①点击div，2s后变色

let div = document.querySelector('div') div.addEventListener('click', function () { setTimeout(function () { this.style.backgroundColor = 'pink' }, 2000) })

我们这样使用this来改变style的属性，是不行的。因为这里的this有指向问题，点击之后会报出一个‘Cannot set properties of undefined (setting 'backgroundColor')’的错误。控制台打印一下this，它指向的是window，在这里的window是没有style属性的，所以style.backgroundColor 就会报错。

此时就可以使用到箭头函数来实现这个需求。

let div = document.querySelector('div') div.addEventListener('click', function () { setTimeout(() => { // console.log(this) this.style.backgroundColor = 'pink' }, 2000) })

此时就不会出现任何错误。因为使用了箭头函数，箭头函数的this是静态的，它指向在声明时所在作用域下的this的值，他是在外层作用域下声明的，所以this指向的是外层函数这个事件的调用者div，就可以找到div并修改它的style.backgroundColor值。

②从数组中返回偶数的元素

我们使用普通函数时：

let str = [1, 22, 45, 76, 36, 47, 19] let result = str.filter(function (item) { if (item % 2 === 0) { return true } else { return false } }) console.log(result)//[22, 76, 36]

使用箭头函数，简化了代码书写：

let str = [1, 22, 45, 76, 36, 47, 19] let result = str.filter(item => { item % 2 === 0 }) console.log(result)//[22, 76, 36]

总结：箭头函数适合与this无关的回调，定时器、数组的方法回调。不适合与this有关的回调，事件回调、对象的方法。

【本文地址】

公司简介

联系我们